<template>
  <div class="lookOne">
    <p-modal
      :title="title"
      :modal="modal"
      @cancel="cancelTo"
      :visible.sync="startVisible"
      width="900px"
      :append-to-body="true"
      class="assignDialog"
    >
      <div class="assign-wrap">
        <div class="warp-left">
          <div class="ant-tree allTitle">
            <li>
              <span
                @click="clickAll"
                :class="{'ant-tree-node-selected': titlteActive}"
                class="ant-tree-node-content-wrapper"
              >全部</span>
            </li>
          </div>
          <p-tree
            :selectedKeys.sync="selectedKeys"
            @select="startHandleNodeClickAnt"
            :load-data="startGetProcessTreeChildrenAnt"
            :tree-data="treeData"
          />
        </div>
        <div class="warp-right">
          <div class="searchInput">
            <p-input-search
              allow-clear
              @search="searchInputClick"
              @keyup.enter.native="searchInputClick"
              v-model="searchUser"
              placeholder="请输入搜索内容"
            ></p-input-search>
          </div>
          <p-table :pagination="false" bordered :columns="columns" :data-source="assignTableData">
            <div slot="name" slot-scope="record">
              <p-checkbox @change="tableChange(record.key)" v-model="record.checked">{{ record.name }}</p-checkbox>
            </div>
          </p-table>
          <div class="pagination">
            <p-pagination
              :defaultPageSize="pageSize"
              @show-size-change="handleSizeChange"
              @change="handleCurrentChange"
              v-model="currentPage"
              :show-total="total => `共 ${total} 条`"
              :total="total"
            />
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="showChoose">
          <span class="choose-txt">
            已选择
            <span style="margin-left: -10px;">{{ `（${curItem.length}）` }}</span>
          </span>
          <p-tag v-if="curItem.length>0" closable @close="handleClose">{{ curItem[0].name }}</p-tag>
        </div>
        <div class="handle-btn">
          <p-button @click="cancelTo">取 消</p-button>
          <p-button type="primary" @click="submitTo">确 定</p-button>
        </div>
      </div>
    </p-modal>
  </div>
</template>
<script>
import process from '@/api/process'
const columns = [
  {
    title: '姓名',
    key: 'name',
    ellipsis: true,
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '所属部门 岗位',
    key: 'orgposRemark',
    ellipsis: true,
    dataIndex: 'orgposRemark'
  }
]
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    modal: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      columns,
      treeData: [],
      curItem: [],
      selectedKeys: [],
      titlteActive: true,
      curCode: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchUser: '',
      assignTableData: [],
      srtatCheckList: [],
      tableHeight: '300',
      srtatCheckChooseList: [],
      srtatCheckListRepeat: [],
      srtatCheckChooseListRepeat: [],
      startVisible: false,
      status: 1
    }
  },
  created () {
    process
      .getOrgTreeList({
        code: ''
      })
      .then(res => {
        const newArray2 = []
        for (var i = 0; i < res.data.length; i++) {
          const curData = res.data[i]
          newArray2.push({
            key: curData.code,
            title: curData.name,
            isLeaf: curData.leaf
          })
        }
        this.treeData = [...newArray2]
      })
    this.selectedAll()
  },
  methods: {
    handleClose () {
      this.curItem = []
      this.assignTableData.forEach(el => {
        el.checked = false
      })
    },
    clickAll () {
      this.selectedAll()
    },
    selectedAll () {
      this.titlteActive = true
      this.selectedKeys = []
      this.curCode = ''
      this.status = 1
      this.getAssignTableData()
    },
    cancelTo () {
      this.startVisible = false
    },
    submitTo () {
      if (this.curItem.length === 0) {
        this.$message.error('请选择转办的人')
        return
      }
      this.startVisible = false
    },
    searchInputClick () {
      this.getAssignTableData()
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.getAssignTableData()
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.getAssignTableData()
    },
    tableChange (index) {
      if (this.assignTableData[index].checked) {
        this.assignTableData.forEach((el, i) => {
          if (index !== i) {
            el.checked = false
          }
        })
        this.curItem = [this.assignTableData[index]]
      } else {
        this.curItem = []
      }
    },
    startGetProcessTreeChildrenAnt (treeNode) {
      if (treeNode.dataRef.children) {
        return
      }
      return process
        .getOrgTreeList({
          code: treeNode.eventKey
        })
        .then(res => {
          const newArray2 = []
          for (var i = 0; i < res.data.length; i++) {
            const curData = res.data[i]
            newArray2.push({
              key: curData.code,
              title: curData.name,
              isLeaf: curData.leaf
            })
          }
          treeNode.dataRef.children = newArray2
          this.treeData = [...this.treeData]
        })
    },
    getAssignTableData () {
      process
        .userList({
          orgCode: this.curCode,
          keyword: this.searchUser,
          limit: this.pageSize,
          pageNo: this.currentPage,
          status: this.status
        })
        .then(res => {
          const curData = res.data.records || []
          curData.forEach((el, i) => {
            el.checked = false
            el.key = i
            if (this.curItem.length > 0 && el.uid === this.curItem[0].uid) {
              el.checked = true
            }
          })
          this.assignTableData = curData
          this.total = res.data.total
        })
    },
    startHandleNodeClickAnt (data) {
      this.curCode = data[0]
      this.titlteActive = false
      this.status = ''
      this.getAssignTableData()
    }
  }
}
</script>

<style scoped lang="less">
.assignDialog {
  .el-dialog__body {
    max-height: 400px;
  }
  .searchInput {
    margin-bottom: 16px;
    width: 240px;
  }
  .pagination {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
  }
  .dialog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.assign-wrap {
  display: flex;
  // max-height: 500px;
  overflow: auto;
  .warp-left {
    width: 300px;
    max-height: 396px;
    overflow: auto;
  }
  .warp-right {
    width: calc(100% - 300px);
    margin-left: 16px;
  }
  .allTitle {
    padding: 0;
  }
  .ant-tree > li:first-child {
    padding-top: 0;
    padding-bottom: 0;
  }
}
</style>
